<!-- 全局echarts可视化组件化封装 -->
<template>
  <VCharts
    v-if="renderChart"
    :option="options"
    :autoresize="autoResize"
    :style="{ width, height }"
  />
</template>

<script lang="ts" setup>
  import { ref, nextTick } from 'vue';
  import VCharts from 'vue-echarts';
  // import { useAppStore } from '@/store';

  defineProps({
    options: {
      type: Object,
      default() {
        return {};
      },
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '100%',
    },
  });

  // echarts组件暗黑模式hook
  // const appStore = useAppStore();
  // const theme = computed(() => {
  //   if (appStore.theme === 'dark') return 'dark';
  //   return '';
  // });

  // 新知识：echarts可视化视图渲染时机等待技巧, 先定义一个显示隐藏布尔, 使用nextTick在setup中开启即可无感渲染完成
  const renderChart = ref(false);
  nextTick(() => {
    renderChart.value = true;
  });
</script>

<style scoped lang="less"></style>
